<script setup lang="ts">
import { onUpdated } from 'vue'
import $ from 'jquery'
import { copyToClipboard } from '../util/ClipboardUti'

defineProps<{
    platformInformationData: any
}>()

onUpdated(() => {
    $('[data-toggle="tooltip"]').tooltip()
})

const copyContent = (id: string) => {
    copyToClipboard("测试")
    $('#' + id).attr('data-original-title', '复制成功').tooltip('show')
    $('#' + id).attr('data-original-title', '复制到剪切板')
}

const closePostalModal = ()=>{
    $('#postalInfoModal').modal('hide')
}

</script>

<template>
    <div class="modal fade" id="postalInfoModal" tabindex="-1" aria-labelledby="postalInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="postalInfoModalLabel">邮寄信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">组织名称：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.companyName }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyCompanyName')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyCompanyName"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">负责人：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.responsiblePerson }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyUser')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyUser"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">联系电话：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.responsiblePersonPhoneNumber }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyPhoneNumber')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyPhoneNumber"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">邮编：</span>
                                </div>
                                <div class="col-md-8 col-lg-10 mb-2">
                                    {{ platformInformationData.postalCode }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyPostalCode')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyPostalCode"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                                <div class="col-md-4 col-lg-2">
                                    <span class="font-weight-bold">地址：</span>
                                </div>
                                <div class="col-md-8 col-lg-10">
                                    {{ platformInformationData.companyAddress }} <button type="button"
                                        class="btn btn-white btn-sm" @click="copyContent('copyAddress')"
                                        data-toggle="tooltip" data-placement="top" title="复制到剪切板"
                                        id="copyAddress"><font-awesome-icon :icon="['far', 'clone']" /></button>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-5">
                            <p class="text-danger">温馨提醒：您好，亲爱的用户！本平台不承担邮费，捐赠时请注意。</p>
                        </div>
                        <div class="col-12 mt-5">
                            <p>捐赠不分多少，爱心无价，传递正能量。</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @click="closePostalModal" >关闭</button>
                </div>
            </div>
        </div>
    </div>
</template>